<script lang="ts" setup>
import {reactive, ref, watch} from "vue";
import { getVPCDetailApi, editVPCApi } from '@/api/topo/simulationApi/vpc'
import { emitter } from '@/utils/bus';
import {ElMessage} from "element-plus";
import { useOperateStatus } from '@/pinia/modules/operateStatus';
let useOperate = useOperateStatus();

// vpcID
const vpcID = ref('');

// 节点数据
const props = defineProps({
  vpcNode: null,
});

const baseInfo = ref([]);
const overViewsData = ref({});

const taskFunc = data => {
  const { msg } = data;
  const info = msg.update || msg.create;

  if(info.status === 3) {
    const vmOperate = ['start', 'stop', 'generate'];
    useOperate.operateBindTask('vpc', info, (item) =>{

      // 启动、停止、重启、生成（右键或者列表更新）
      if(vmOperate.includes(item.type)) {
        getVmOverViews();
      }
    });
  }
};
// 监听websocket消息通知
emitter.on('Task', taskFunc);

/**
 * 获取概览
 */
const getVmOverViews = () =>{
  getVPCDetailApi(vpcID.value).then(res =>{
    const overviewsRes = res.data;
    overViewsData.value = res.data;
    baseInfo.value = [
      { name: '状态', value: !overviewsRes.generate ? '未生成' : (overviewsRes.status ? '运行' : '关闭'), type: 'status' },
      { name: '集群', value: overviewsRes.clusterName },
      { name: '计算节点', value: overviewsRes.computerName },
      { name: '场景', value: overviewsRes.sceneName }
    ]
  })
}

// 修改备注
const remarksVisible = ref(false);
const remarkForm = reactive({
  desc: ''
})

/**
 * 打开备注弹窗
 */
const openRemarksDialog = () =>{
  remarksVisible.value = true;
  remarkForm.desc = overViewsData.value.desc;
}

/**
 * 确认修改备注
 */
const editRemarks = () =>{
  editVPCApi(vpcID.value, remarkForm).then(res => {
    if (!(res instanceof Error)) {
      ElMessage.success('编辑成功');
      remarksVisible.value = false;
      getVmOverViews();
    }
  });
}

// 监听传递过来的节点数据
watch(() =>props.vpcNode, (val) =>{
  vpcID.value = props.vpcNode?.ID;

  if(vpcID.value) {
    getVmOverViews();
  }
},  { immediate: true } )
</script>

<template>
  <div class="vpc-network-overviews">
    <el-row :gutter="12">
      <el-col :span="10" :lg="10" :sm="24" :xs="24">
        <div class="vpc-network-overviews-common">
          <div class="vpc-network-overviews-common-title">基本信息</div>
          <div v-for="item in baseInfo" class="vpc-network-overviews-baseInfo">
            <span>{{ item.name }}：</span>
            <span class="vm-network-overviews-baseInfo-value"
                  :title="item.value"
                  :style="{ 'color': (item.type === 'status' ? !overViewsData.generate ? 'orange' : (overViewsData.status ? '#ABE338' : '#ff0000') : '') }">
              <span
                  class="vm-network-overviews-baseInfo-status"
                  v-if="item.type === 'status'"
                  :style="{ 'background-color': !overViewsData.generate ? 'orange' : (overViewsData.status ? '#ABE338' : '#ff0000') }"
              >
              </span>
              {{ item.value }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="14" :lg="14" :sm="24" :xs="24">
        <div class="vpc-network-overviews-common">
          <div class="vpc-network-overviews-common-title">备注</div>
          <div class="vpc-network-overviews-remarks" @dblclick="openRemarksDialog">
            <pre>{{ overViewsData.desc }}</pre>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

 <div>
   <el-dialog v-model="remarksVisible" title="修改备注" class="remarks_dialog">
     <el-form
         :model="remarkForm"
         class="m-auto mt-1"
     >
       <el-form-item label="描述" prop="desc">
         <el-input type="textarea" :rows="6" v-model="remarkForm.desc" />
       </el-form-item>
     </el-form>
     <template #footer>
        <span>
          <el-button @click="remarksVisible = false">取 消</el-button>
          <el-button type="primary" @click="editRemarks"> 确 定 </el-button>
        </span>
     </template>
   </el-dialog>
 </div>
</template>

<style scoped lang="scss">
.vpc-network-overviews {
  padding-left: 12px;

  .vpc-network-overviews-common {
    border: 1px solid #e4e7ed;
    //box-shadow: 0 0 12px rgba(0,0,0,0.12);
    border-radius: 4px;
    height: calc(100vh - 340px);
    margin-top: 12px;

    .vpc-network-overviews-remarks {
      padding: 0 12px 12px;
      width: 100%;
      cursor: pointer;
      height: calc(100% - 45px);
    }

    .vpc-network-overviews-common-title {
      padding: 12px;
      font-weight: bold;
      background-color: #EFF6FF;
      margin-bottom: 12px;
    }

    .vpc-network-overviews-baseInfo {
      padding: 0 12px;
      height: 32px;
      line-height: 32px;
      position: relative;

      .vm-network-overviews-baseInfo-value {
        position: absolute;
        right: 12px;
        max-width: 360px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .vm-network-overviews-baseInfo-status {
          display: inline-block;
          margin-right: 3px;
          width: 12px;
          height: 12px;
          border-radius: 50%;
        }
      }
    }
  }
}

:deep(.remarks_dialog) {
  width: 560px;
  .el-form {
    max-width: 460px;
    .el-form-item__label {
      width: 80px;
    }
  }
}
</style>
